/*
 * @Author: aleimu
 * @Date: 2021-03-08 09:36:50
 * @Description: file content
 */

import React, { useEffect, useState, useRef } from 'react';
import ReactDOM from 'react-dom';
import { Tag, Input, Tooltip } from 'antd';

function Counter({ initialCount, cc }) {
    console.log(cc)
    const [count, setCount] = useState(initialCount);
    return (
        <>
            Count: {count}
            Count: {cc}
            <button onClick={() => setCount(initialCount)}>Reset</button>
            <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
            <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
        </>
    );
}

function Counter2(props) {
    console.log(props)
    const initialCount = props.value.initialCount
    const cc = props.value.cc
    const [count, setCount] = useState(initialCount);
    return (
        <>
            Count: {count}
            Count: {cc}
            <button onClick={() => setCount(initialCount)}>Reset</button>
            <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
            <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
        </>
    );
}


const App = () => {
    return (
        <div>
            <h3>自动解包传递参数</h3>
            <Counter initialCount={1} cc={'aaa'} />
            <h3>props传递参数</h3>
            <Counter2 value={{ initialCount: 1, cc: 2222 }} />
        </div>
    )
}


export default App

